<template>
    <div id="sideNavigation">
        <div id="sideNavigation" @click="btn()">
            <div id="sideNavigationBox" v-show="isShow">
                <router-link to="/home" id="routerLink">
                    <i id="img1"></i>
                    <span>首页</span>
                </router-link>
                <router-link id="routerLink" to="">
                    <i id="img2"></i>
                    <span>分类</span>
                </router-link>
                <router-link to="/shopping" id="routerLink">
                    <i id="img3"></i>
                    <span>购物车</span>
                </router-link>
                <router-link to="/order" id="routerLink">
                    <i id="img4"></i>
                    <span>订单</span>
                </router-link>
                <router-link to="/myjd2" id="routerLink">
                    <i id="img5"></i>
                    <span>我的</span>
                </router-link>
                <span id="arrow"></span>               
            </div>            
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
               isShow:false           
          }
    },
    methods:{
        btn(){
            this.isShow=!this.isShow
        }
    }
}
</script>
<style scoped lang="scss">
//右侧导航
    *{
        margin:0;
        padding:0;
        list-style-type:none;
        text-decoration:none;
    }
    #sideNavigation{
        width:76px;
        height:76px;
        border:1p solid #333;
        background-image:url(../image/store/bm.png);
        background-color:rgba(0,0,0,0.5);
        background-repeat:no-repeat;
        background-position:13px 16px;
        background-size:130px 40px;
        position:fixed;
        top:1030px;
        left:675px;
        border-radius:10px 0 0 10px;
        
        // &:hover #sideNavigationBox{
        //     display:block;                
        // }

        #sideNavigationBox{
            width:190px;
            height:295px;
            border:1px solid #757575;
            position:fixed;
            top:660px;
            left:560px;
            // display:none;

            #routerLink{
                display:block;
                width:190px;
                height:70px;
                border-bottom:2px solid #4b4b4b;
                background-color:rgba(0,0,0,0.8);
                display:flex;

                i{
                    display:block;
                    width:76px;
                    height:70px;                    
                    background-repeat:no-repeat; 
                    background-image:url(../image/store/bmenu.png);
                    background-repeat:no-repeat; 
                    background-size:32px 600px;                 
                }
                span{
                    display:block;
                    width:114px;
                    height:70px;
                    color:#fff;
                    font-size:30px;
                    line-height:70px;
                }                

                #img1{                    
                    background-position:20px -100px;                    
                }
                #img2{
                    background-position:20px -200px;
                }
                #img3{
                    background-position:20px -300px;
                }
                #img4{
                    background-position:20px -400px;
                }
                #img5{
                    background-position:20px -500px;
                }
            }
            #lastA{
                    border-bottom:0;
            }
            #arrow{
                display:block;
                width:0;
                height:0;
                border-top:12px solid rgba(0,0,0,0.8);
                border-right:12px solid transparent;
                border-left:12px solid transparent;
                position: absolute;
                right:25px;
                bottom:-74px;
            }
        }       
    }
</style>


